<template>
  <div class="upload-container">
    <div>
       <Divider>表单与文件上传下载(可自定义上传、图片预览与点击下载文件)</Divider>
      <VolForm
        ref="myform"
        :label-width="180"
        :load-key="true"
        :form-fileds="formFileds"
        :form-rules="formRules"
      ></VolForm>
    </div>
  </div>
</template>
<script>
import VolForm from "@/components/basic/VolForm.vue";
import VolUpload from "@/components/basic/VolUpload.vue";
import VolHeader from "@/components/basic/VolHeader.vue";
export default {
  components: {
    VolUpload,
    VolForm,
    VolHeader
  },
  data() {
    //表单验证时根据remove判断是否有图片
    return {
      formFileds: {
        OrderNo: "BJ2019000001",
        OrderDate: new Date(),
        City: "北京市",
        Price: 277.6,
        ProductCode: "2019FX001",
        ProductName: "无线充电宝",
        file1: "",
        file2: "",
        file3: [
          //对已有文件显示，并可重新上传
          {
            name: "x1.jpg",
            path:
              "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x1.jpg"
          },
          {
            name: "x2.jpg",
            path:
              "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x2.jpg"
          },
          {
            name: "x3.jpg",
            path:
              "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg"
          },
          {
            name: "xx.jpg",
            path:
              "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/xx.jpg"
          },
          {
            name: "tj01.jpg",
            path:
              "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/tj01.jpg"
          }
        ],
        file4: "",
        file5: [
          {
            name: "测试现有文件可下载1.xlsx",
            path:
              "https://files-1256993465.cos.ap-chengdu.myqcloud.com/测试现有文件可下载1.xlsx"
          },
          {
            name: "测试现有文件可下载2.xlsx",
            path:
              "https://files-1256993465.cos.ap-chengdu.myqcloud.com/测试现有文件可下载2.xlsx"
          }
        ],
        //只读图片
        //也可以直接用逗号拼接 "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg,https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg",
        file6: [
          {
            name: "x2.jpg",
            path:
              "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x2.jpg"
          },
          {
            name: "x3.jpg",
            path:
              "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg"
          }
        ], //只读可下载的文件，格式与上面只读图片相同
        file7: [
          {
            name: "(api后台文件)基础表单+编辑只读 (4).xlsx",
            path:
              "Upload/Tables/App_Appointment/201911241454458938/基础表单+编辑只读 (4).xlsx"
          },
          {
            name: "(第三方服务器文件).xlsx",
            path:
              "https://files-1256993465.cos.ap-chengdu.myqcloud.com/测试现有文件可下载1.xlsx"
          }
        ],
        file8: ""
      },
      formRules: [
        //两列的表单，formRules数据格式为:[[{},{}]]
        [
          {
            title: "商品编号",
            required: true, //设置为必选项
            field: "ProductCode",
            type: "text"
          },
          {
            title: "商品名称",
            placeholder: "此处数据源为手动绑定",
            required: false,
            field: "ProductName",
            type: "text"
          },
          {
            type: "decimal",
            title: "商品价格",
            required: true,
            placeholder: "你可以自己定义placeholder显示的文字",
            field: "Price"
          }],
          [{
            dataKey: "city",
            title: "收货城市",
            required: true,
            field: "City",
            data: [],
            type: "select"
          }
      ,
          {
            title: "发货单号",
            field: "OrderNo",
            type: "text"
          },
          {
            title: "发货日期",
            field: "OrderDate",
            type: "datetime"
          }
        ],
        [
          {
            title: "自动上传",
            field: "file1",
            required: true,
            maxSize: 1, //最大1M文件
            url: "/api/App_Appointment/Upload",
            type: "file"
          },
          {
            title: "上传excel",
            field: "file2",
            maxSize: 0.5, //最大0.5M文件
            multiple: true, //启用多文件
            maxFile: 2, //最多两个文件
            url: "/api/App_Appointment/Upload",
            type: "excel"
          },
              {
            title: "文件只读",
            readonly: true,
            field: "file7",
            downLoad: true,
            maxSize: 0.5, //最大0.5M文件
            multiple: true, //启用多文件
            maxFile: 2, //最多两个文件
            type: "excel"
          }
        ],
        [
          {
            title: "上传下载",
            autoUpload: false,
            field: "file5",
            maxSize: 1, //最大1M文件
            multiple: true, //启用多文件
            maxFile: 3, //最多3个文件
            downLoad: true,
            url: "/api/App_Appointment/Upload",
            type: "file",
            fileClick(index, file, files) {
              this.$Message.error(file.name);
              return true;
            }
          },
            {
            title: "图片只读",
            field: "file6",
            readonly: true,
            type: "img"
          },
          {
            title: "手动上传",
            field: "file4",
            maxSize: 1, //最大1M文件
            multiple: true, //启用多文件
            maxFile: 3, //最多两个文件
            url: "/api/App_Appointment/Upload",
            type: "img"
          }
        ],
        [
          {
            title: "上传图片",
            autoUpload: false,
            field: "file3",
            maxSize: 1, //最大1M文件
            colSize: 12,
            url: "/api/App_Appointment/Upload",
            type: "img"
          }
        ]
      ]
    };
  }
};
</script>
<style scoped>
.upload-container {
  padding: 10px 15px;
}
.upload-container >>> .img-item,
.upload-container >>> .img-item img{
  width: 70px  !important;
  height: 70px  !important;
}
</style>